<template>
  <div>
    <!-- 收藏夹资讯编辑状态 -->
    <van-nav-bar title="批量管理" left-arrow @click-left="$router.go(-1)">
      <template #right>
        <van-button type="info" size="mini">完成</van-button>
        <van-icon name="search" size="20" class="ml10" @click="showSearch=true" />
        <van-icon name="ellipsis" size="20" class="ml10" @click="show=true" />
      </template>
    </van-nav-bar>
    <!-- 搜索 -->
    <van-overlay :show="showSearch" @click="showSearch = false">
      <div class="wrapper" @click.stop>
        <van-search v-model="value" show-action placeholder="请输入已收藏文章名称" @search="onSearch">
          <template #action>
            <van-button type="info" size="mini" @click="onSearch">搜索</van-button>
          </template>
        </van-search>
      </div>
    </van-overlay>
    <div class="blue-line"></div>
    <div class="flex">
      <img src="~assets/test.jpg" class="jpg" alt />
      <div class="ml20">
        <div class="f16 fb mt10 text-2">
          默认收藏夹
        </div>
        <div class="c-b5 f12 mt10">
          <div>作者：用户123</div>
        </div>
        <div class="flex c-b5 mt10">
          创建时间:2020-02-02
        </div>
      </div>
    </div>
    <div class="p15">
      <van-checkbox-group v-model="result">
        <van-checkbox name="a" class="border-bottom">
          <div class="flex">
            <img src="~assets/test.jpg" class="jpg" alt />
            <div class="ml20">
              <div class="f14 fb mt10 text-2">
                贵州省瓮安至开阳高速公路工贵州省瓮安至开阳高速公路工贵州省瓮安至开阳高速公路工贵州省瓮安至开阳高速公路工
                程竣（交)...
              </div>
              <div class="c-b5 f12 mt10">
                <div>作者：用户123</div>
              </div>
              <div class="flex c-b5 mt10">
                <div>
                  <van-icon name="browsing-history-o" />800
                </div>
                <div class="ml20">
                  <van-icon name="orders-o" />800
                </div>
                <div class="ml20">
                  <van-icon name="star-o" />800
                </div>
              </div>
            </div>
          </div>
        </van-checkbox>
      </van-checkbox-group>
    </div>
    <van-action-sheet v-model="show" cancel-text="取消" :round="false">
      <van-cell-group>
        <van-cell title="编辑收藏栏信息" icon="edit"></van-cell>
        <van-cell title="批量管理" icon="bars"></van-cell>
        <van-cell title="一键清除失效文章" icon="cross"></van-cell>
        <van-cell title="删除此收藏夹" icon="delete"></van-cell>
      </van-cell-group>
    </van-action-sheet>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: "",
      result: [],
      show: false,
      showSearch: true
    };
  },
  methods: {
    onSearch() {}
  }
};
</script>

<style scoped>
.jpg {
  width: 100px;
  height: 100px;
}
</style>